<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org"
      th:replace="pages/common/main :: layout(~{}, ~{::section}, ~{}, ~{::script})">
    <section>
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-sm5">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>角色列表</legend>
                    </fieldset>
                    <div id="role" class="demo-tree-more"></div>
                </div>
                <div class="layui-col-sm7">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>权限结点</legend>
                    </fieldset>
                    <div id="permission" class="demo-tree-more"></div>
                    <hr class="layui-bg-gray">
                </div>
            </div>
        </div>
    </section>
    <script th:inline="javascript">
        layui.use(['tree', 'util', 'ax'], function () {
            var tree = layui.tree
                , $ax = layui.ax
                , userId = "[(${userId})]";


            // 权限结点
            var inst = tree.render({
                elem: '#permission'
                , data: /*[(${pTree})]*/[]
                , showCheckbox: true  //是否显示复选框
                , id: 'permissionId'
                , isJump: false //是否允许点击节点时弹出新窗口跳转
            });

            inst.setChecked(/*[[${childrenPermission}]]*/[])
            inst.config.oncheck = function (obj) {
                var ids = [];
                if (obj.data.children && obj.data.children.length > 0) {
                    layui.each(obj.data.children, function (key, item) {
                        ids.push(item.id)
                    })
                } else {
                    ids.push(obj.data.id)
                }

                var url = Kong.ctxPath + "/sys/admin/assign/add";
                if (!obj.checked) {
                    url = Kong.ctxPath + "/sys/admin/assign/del";
                }

                var ajax = new $ax(url, function (data) {
                    Kong.success("设置成功！")
                }, function (res) {
                    Kong.error(res.msg)
                });

                ajax.setMethod("post")
                ajax.setData({userId: userId, ids: ids, type: 2})
                ajax.sendJson()
            }

            // 角色
            var roleInst = tree.render({
                elem: '#role'
                , data: /*[(${rTree})]*/[]
                , showCheckbox: true  //是否显示复选框
                , id: 'roleId'
                , isJump: false //是否允许点击节点时弹出新窗口跳转
            });

            roleInst.setChecked(/*[[${childrenRole}]]*/[])
            roleInst.config.oncheck = function (obj) {
                var ids = [];
                if (obj.data.children && obj.data.children.length > 0) {
                    layui.each(obj.data.children, function (key, item) {
                        ids.push(item.id)
                    })
                } else {
                    ids.push(obj.data.id)
                }

                var url = Kong.ctxPath + "/sys/admin/assign/add";
                if (!obj.checked) {
                    url = Kong.ctxPath + "/sys/admin/assign/del";
                }

                var ajax = new $ax(url, function (data) {
                    Kong.success("设置成功！")
                }, function (res) {
                    Kong.error(res.msg)
                });

                ajax.setMethod("post")
                ajax.setData({userId: userId, ids: ids, type: 1})
                ajax.sendJson()
            }


        });
    </script>
</html>